import React, { useState, useEffect, useMemo, useRef } from 'react';
import { Spin, Menu } from 'antd';
import {
  UnorderedListOutlined,
  LineChartOutlined,
  AreaChartOutlined,
  ExclamationCircleOutlined,
  FireOutlined,
  StockOutlined,
  AlertOutlined,
} from '@ant-design/icons';
import * as Focus from './component';

const { SubMenu } = Menu;

export default () => {
  const [key, setkey] = useState(localStorage.getItem("curkey")??'Device');

  let handleClick = (e) => {
    setkey(e.key);
    localStorage.setItem("curkey",e.key)
  };

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        position: 'relative',
        overflow: 'hidden',
        alignItems: 'flex-start',
      }}
      className="center"
    >
      <div
        style={{
          width: 200,
          height: 'calc(100% - 24px)',
          backgroundColor: 'rgba(0,0,0,0.2)',
          margin: 12,
          overflow: 'hidden',
          border: '1px solid rgba(82, 136, 198, 0.4)',
        }}
      >
        <Menu
          onClick={handleClick}
          style={{ width: 200, backgroundColor: 'transparent', marginTop: -4 }}
          defaultSelectedKeys={[key]}
          mode="inline"
          theme="dark"
        >
          <Menu.Item key="Device" icon={<UnorderedListOutlined />}>
            设备信息
          </Menu.Item>
          <Menu.Item key="DeviceUse" icon={<LineChartOutlined />}>
            设备使用率
          </Menu.Item>
          <Menu.Item key="Power" icon={<AreaChartOutlined />}>
            充电功率统计
          </Menu.Item>
          <Menu.Item key="DeviceError" icon={<ExclamationCircleOutlined />}>
            设备异常统计
          </Menu.Item>
          <Menu.Item key="TempError" icon={<FireOutlined />}>
            温度异常告警
          </Menu.Item>
          <Menu.Item key="Voltage" icon={<StockOutlined />}>
            实时电压曲线
          </Menu.Item>
          <Menu.Item key="PowerError" icon={<AlertOutlined />}>
            充电异常告警
          </Menu.Item>
        </Menu>
      </div>

      <div
        style={{
          flex: 1,
          height: 'calc(100% - 24px)',
          backgroundColor: 'rgba(0,0,0,0.2)',
          margin: 12,
          marginLeft: 0,
          padding: 12,
          border: '#5288c6 solid 1px',
        }}
      >
        {React.createElement(Focus[key])}
      </div>
    </div>
  );
};
